<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/echarts.min.js"></script>
    <script src="../js/axios.js"></script>
    <script src="../js/vue.js"></script>
</head>
<body>
<div id="main" style="width: 600px;height:400px;"></div><!--柱状图页面样式-->
<div id="main2" style="width: 600px;height:400px;"></div><!--饼状图页面样式-->
<div id="main3" style="width: 600px;height:400px;"></div><!--折线图页面样式-->
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));//柱状图
    var myChart2 = echarts.init(document.getElementById('main2'));//饼状图
    var myChart3 = echarts.init(document.getElementById('main3'));//折线图
    // 指定图表的配置项和数据
    axios.get("/count/two.do").then(res => {
        //后台数据返回Map集合
        let e = res.data.aa;
        let l = res.data.bb;
        let x = [];
        let yE = [];
        let yL = [];
        //若key不为空值使用
        // for (let i = 0; i < e.length; i++) {
        //     x.push(e[i].name);
        //     yE.push(e[i].value);
        //     yL.push(l[i].value);
        // }
        //若key为空值使用
        for (let i = 0; i < e.length; i++) {
            x.push(e[i].name);
            yE.push(e[i].value);
        }
        for (let i = 0; i < l.length; i++) {
            yL.push(l[i].value);
        }


        //  指定图表的配置项和数据
        //双柱图
        var option = {
            title: {
                text: 'ECharts 入门示例'
            },
            tooltip: {},
            legend: {
                data: ['销量', '销售额']
            },
            xAxis: {
                data: x
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: yL
            }, {
                name: '销售额',
                type: 'bar',
                data: yE
            }]
        };
        // 使用刚指定的配置项和数据显示图表（柱状图）。
        myChart.setOption(option);


        //双饼图
        var  option2 = {
            title: {
                text: '各类优惠券使用情况',
                subtext: '请看详细数据',
                x: 'center'
            },
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
                orient: 'vertical',
                left: 'left',
                data: x
            },
            series: [
                {
                    name: '优惠券使用情况',
                    type: 'pie',
                    radius: '35%',
                    center: ['30%', '50%'],
                    data: res.data.aa,
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                },
                {
                    name: '优惠券退单情况',
                    type: 'pie',
                    radius: '35%',
                    center: ['80%', '50%'],
                    data: res.data.bb,
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };
        // 使用刚指定的配置项和数据显示图表（饼状图）。
        myChart2.setOption(option2);


        // 折线图
        var option3 = {
            title: {
                text: '优惠券退单数量'
            },
            tooltip: {},
            legend: {
                data: ['优惠券退单数量']
            },
            xAxis: {
                // data: ["2021.01","2021.02","2021.03"]
                // data: res.data.name
                data: x
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                name: '优惠券使用情况',
                type: 'line',
                // data: res.data.value
                data: res.data.aa
                // data: [3,5,8]
            }, {
                name: '优惠券退单情况',
                type: 'line',
                // data: res.data.value
                data: res.data.bb
                // data: [3,5,8]
            }

            ]

        };
        // 使用刚指定的配置项和数据显示图表（折线图）。
        myChart3.setOption(option3);


    });
</script>
</body>
</html>